作者：mqliutie 原文地址：http://segmentfault.com/a/1190000002748032

常用插件 ：

Sublime Text有一个缺点，当你想使用浏览器浏览你的html页面的时候，你需要在你的文件上点击鼠标右键，选择Open In Browser才可以浏览器浏览，而这是用默认浏览器浏览，如果想用第二个浏览器都没办法。所以，可以通过SideBarEnhancements这个插件来更方便的浏览。

第一步：安装

通过Package Control->Install Package搜索sidebarenhancements安装。

第二步：配置 ( 一 )

右键某html，js，css等文件，找到Open With然后点击Edit Applications将里面内容设置为：

第三步：配置 ( 二 )

打开Preferences里面的 Key Bindings - User把内容修改为：

现在，F1就是 Safari，F2是Firefox，F4是 Chrome.

第一步：安装

通过Package Control->Install Package搜索HTML-CSS-JS Prettify安装。

第二步：使用

第三步： 配置 ( 快捷键 )

如果对快捷键不满意，可以自己设置 . 打开Preferences里面的Key Bindings - User，添加内容：{ "keys": ["alt+q"], "command": "htmlprettify" }，当然快捷键你可以自己更改。

第四步： 配置 ( 代码整理样式 )

如果对代码对其效果不满意，可以选择Preferences里的Package Settings找到HTML/CSS/JS Prettify里的Set Prettify Preferences. 里面是一些规则的设置。这个文件就是github(详细设置可到github中看)中提到的.jsbeautifyrc文件。

这个插件功能是匹配括号，在行号前面可以看到匹配括号的位置。

第一步：安装

通过Package Control->Install Package搜索BracketHighlighter安装。

第二步：配置

将preferences-->package settings-->Bracket highlighter-->Bracket settings-Default内容复制到Bracket settings-User中，因为default里面的内容是不可更改的，即使能更改，一旦插件更新，更改就会消失，所以尽量在User中设置。按Command+F(或者ctrl+F)搜索color，找到下所示：

color是设置颜色，英文介绍没看懂怎么替换颜色。

它的功能是代码提示，支持这些语言：JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django,HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

它还有一个功能，就是跳转到函数定义的地方。

怪事 ：

这个插件真的是非常怪，第一次安装的时候，如果不进行第二步的配置就没有代码提示，于是进行第二步配置，但是配置后函数跳转功能没有。紧接着我remove package然后重新安装，还是不能跳转。我将"Setting User"中的所有内容删除，函数跳转功能有了。然后紧接着我又将Default的内容全部复制到User中，函数跳转功能还有，代码提示功能也有。紧接着我又按照第二步修改过后，函数跳转功能还有，代码提示功能也有。弄不懂了- -+，反正现在能用就行。

可能是我人品差吧，，，同学安装后什么也没做，什么功能都有。而我折腾半天。

第一步： 安装

通过Package Control->Install Package搜索SublimeCodeIntel安装。(安装过程中非常慢，慢慢等着吧，我挂了VPN快了不少。)

第二步： 配置

选择Preferences->Package Settings->SublimeCodeIntel->Setting Default，将其内容全部复制到Setting User中。按Command+F(或者ctrl+F)搜索codeintel_selected_catalogs，将其内容改为如下：

第三步：使用

1.按d会提示div tag选择这个div tag就会出现：

2.但输入div.class或者div#id，按下Tab会出现下面效果：

这个功能2其实Emmet也有，但是Emmet没有功能1的代码提示。

Emmet(前身为大名鼎鼎的Zen Coding)是一个能大幅度提高前端开发效率的一个工具：

第一步：安装

通过Package Control->Install Package搜索Emmet安装。

第二步：使用

快速设置class属性和id属性，在SublimeCodeIntel插件功能2就可以了，但是下面的功能SublimeCodeIntel却没有。

输入ul>li*5，按下Tab，会有如下结果：

更多使用方法可以 百度，Google 搜索这个插件怎么用，也可以去官方文档查看。

第三步：配置

Emmet还有一个功能，选取相同词，可以一次更改多个词，在mac中默认快捷键是Canmand+D(我记得是，要不然我也不会改键)。

我习惯Cammand+D(Ctrl+d)是删除当前行，所以在Preferences->Key Bindings - User添加下面这两行：

这个插件的功能就是跳转到函数定义的地方去。SublimeCodeIntel也有这个功能，因为当时安装 SublimeCodeIntel是跳转有问题，所以找到了它(感觉它不如SublimeCodeIntel)。

第一步：安装插件

通过Package Control->Install Package搜索CTags安装。

第二步：安装ctags

要想ctags插件可以使用，先要在相应的项目目录生成.tags文件，而生成这个文件，就需要在系统中安装ctags.

如果两个都没有，我推荐使用Homebrew，因为命令安装，不麻烦，终端输入下列命令：

第三步：配置

将下列代码复制到Preferences->Package Settings->CTags->Setting User中保存：

第四步：使用

终端进入项目根目录，运行：

在Sublime Text中的项目根目录点击鼠标右键会出现CTags : Rebuild Tags，点击后就会出现.tags文件和.tags_sorted_by_file文件。

现在找到一个调用函数的地方，选中函数名，鼠标右键选择Navigate to Defination，就会直接跳到函数声明的地方。

问题 : Ctags问题

当在 Sublime Text 中编写 markdown 文件时，直接按浏览器浏览全是乱码，而且还没有将 markdown 文件解析成相应的 HTML. 这两个插件的功能就是可以用浏览器浏览 Sublime Text 中编写的 markdown文件。

第一步：安装插件

通过Package Control->Install Package搜索Markdown Editing和Markdown Preview安装。

第二步：配置

打开Preferences->Package Settings->Markdown Preview->Setting User将下面这句话粘贴进去：

打开Preferences->Key Binding User，添加下面一句话：

keys的值是以上面浏览器预览markdown文件。

第三步：使用

新建一个index.md，编写markdown格式的内容写完以后按F6(我自己设置的时F6)就会看到Chrome中显示的时解析后的样子。